<template>
    <!--    <img v-bind="$attrs" :src="imgUrl" @error="errorFn($event)" />-->
    <!--    <fui-lazyload v-bind="$attrs" :src="imgUrl" @error="errorFn($event)"></fui-lazyload>-->
    <image v-bind="$attrs" :src="imgUrl" @error="errorFn($event)"></image>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'

const props = defineProps<{
    url: string
}>()
const count = ref(0)
const imgUrl = computed({
    get() {
        if (count.value == 0) {
            return fmtUrl(props.url, '_375')
        }
        if (count.value == 1) {
            return fmtUrl(props.url, '_750')
        }
        return props.url
    },
    set(val) {
        return val
    }
})
const errorFn = (e: any) => {
    count.value++
}

const fmtUrl = (url: string, spliceStr: string) => {
    const fileNameRegex = /^(.*)fileName=([^.]+)(\.\w+)$/
    // 使用正则表达式匹配
    const matches = url.match(fileNameRegex)
    if (matches) {
        return matches[1] + 'fileName=' + matches[2] + spliceStr + matches[3]
    }
    return url
}
</script>

<style scoped lang="scss">
:deep(.fui-lazyload__img) {
    border-radius: 16px;
}
</style>
